<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
		<title>绑定银行卡</title>
	</head>
	<link rel="stylesheet" href="font/iconfont.css" />
	<link rel="stylesheet" href="css/css.css" />
	<link rel="stylesheet" href="dist/lib/weui.min.css">
	<link rel="stylesheet" href="dist/css/jquery-weui.min.css">
	<link rel="stylesheet" href="js/layui/css/layui.css" />
	<script type="text/javascript" src="dist/lib/jquery-2.1.4.js"></script>
	<script src="dist/js/jquery-weui.min.js"></script>
	<script type="text/javascript" src="js/layui/layui.js"></script>
	<script type="text/javascript" src="dist/lib/fastclick.js"></script>

	<link rel="stylesheet" href="css/LArea.css">
	<style>
		body {
			line-height: 1.6 !important;
		}
		
		* {
			margin: 0;
			padding: 0;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-touch-callout: none;
			box-sizing: border-box;
		}
		
		html,
		body {
			margin: 0 auto;
			width: 100%;
			min-height: 100%;
			overflow-x: hidden;
			-webkit-user-select: none;
		}
		
		body {
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			-webkit-text-size-adjust: 100%; //关闭自动调整字体
			-webkit-overflow-scrolling: touch;
			overflow-scrolling: touch;
		}
		
		#yh-dialog {
			position: fixed;
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 1000;
			height: 100%;
			display: none;
		}
		
		#dialog-content {
			position: fixed;
			width: 85%;
			background: white;
			border-radius: 5px;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			display: none;
		}
		
		.yh-radio {
			width: 20px;
			height: 20px;
			border-radius: 15px;
			border: solid 1px #f0f0f0;
			background-repeat: no-repeat;
		}
		
		.yh-radio:checked {
			/* background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );*/
			background: url(images/radio.png) 0 -20px;
		}
	</style>

	<body ontouchstart style="background-color:#f7f7f7;">

		<div id="yh-dialog">
			<div id="dialog-content">

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中国工商银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中国农业银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中国银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中国建设银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>兴业银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中国邮政储蓄银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>平安银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中国民生银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>交通银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>中信银行</p>
					</div>
					<div class="weui-cell__ft"><input type="radio" name="yh-radio" class="yh-radio" /></div>
				</div>

			</div>
		</div>

		<header class="wy-header" style=" background-color: #fff;">
			<div class="wy-header-icon-back">
				<a href="javascript:history.back(-1)"><i class="iconfont icon-left6"></i></a>
			</div>
			<div class="wy-header-title">绑定银行账号</div>
		</header>
		<div class="weui-cells user-bangding" style="margin-top:5px;">
			<div class="font-sm-color3" style="padding: 15px;">
				<img src="dist/demos/images/icon_nav_noti.png" width="15px" style="margin-right: 10px;" />姓名必须和身份证中的一样，务必保证身份证银行卡信息正确，否则无法退款
			</div>
			<div class="weui-cell font-sm-color2">持卡人：<input type="text" value="宋菲菲" /></div>
			<div class="weui-cell font-sm-color2">卡号：<input type="text" value="410256256232533265" /></div>
			<div class="weui-cell font-sm-color2">银行：<input type="text" value="" id="yh" /></div>
			<div class="weui-cell font-sm-color2">所在城市：
				<input id="demo1" type="text" readonly="" placeholder="请选择所在城市" value="" style="flex: 1;color:#000!important;">
				<input id="value1" type="hidden" value="17,191,3796">
			</div>
			<div class="weui-cell font-sm-color2">支行名称：<input type="text" value="二里岗支行" /></div>
		</div>
		<div style="margin: 0px 15px;">
			<button type="submit" class="weui-btn addID_tbn">提交审核</button>
		</div>
		<script src="js/LAreaData1.js"></script>
		<script src="js/LAreaData2.js"></script>
		<script src="js/LArea.js"></script>
		<script>
			var area1 = new LArea();
			area1.init({
				'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
				'valueTo': '#value1', //选择完毕后id属性输出到该位置
				'keys': {
					id: 'id',
					name: 'name'
				}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
				'type': 1, //数据源类型
				'data': LAreaData //数据源
			});
			area1.value = [1, 13, 3]; //控制初始位置，注意：该方法并不会影响到input的value

			var area2 = new LArea();
			area2.init({
				'trigger': '#demo2',
				'valueTo': '#value2',
				'keys': {
					id: 'value',
					name: 'text'
				},
				'type': 2,
				'data': [provs_data, citys_data, dists_data]
			});
		</script>

		<script>
			$().on('')
			alert($("#demo1").val())

			layui.use('upload', function() {
				var $ = layui.jquery,
					upload = layui.upload;

				//普通图片上传
				var uploadInst = upload.render({
					elem: '#upload_1',
					url: '/upload/',
					accept: 'images',
					acceptMime: 'image/*' //限制上传图片时打开文件夹只能看到图片文件 
						,
					exts: 'jpg|png|gif|bmp|jpeg|.jpg',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#upload_img1').attr('src', result); //图片链接（base64）
						});
					},
					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#Text1');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				});

				//普通图片上传
				var uploadInst = upload.render({
					elem: '#upload_2',
					url: '/upload/',
					accept: 'images',
					acceptMime: 'image/*' //限制上传图片时打开文件夹只能看到图片文件 
						,
					exts: 'jpg|png|gif|bmp|jpeg|.jpg',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#upload_img2').attr('src', result); //图片链接（base64）
						});
					},
					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#Text2');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				});
			});

			$(document).on("click", "#upload_img1", function() {
				$.actions({
					title: "选择操作",
					onClose: function() {
						console.log("close");
					},
					actions: [{
						text: "相册",
						className: "color-warning",
						onClick: function() {
							$("#upload_1").trigger("click");
						}
					}]
				});
			});

			$(document).on("click", "#upload_img2", function() {
				$.actions({
					title: "选择操作",
					onClose: function() {
						console.log("close");
					},
					actions: [{
						text: "相册",
						className: "color-warning",
						onClick: function() {
							$("#upload_2").trigger("click");
						}
					}]
				});
			});
		</script>

		<!--footer-->
		<div class="weui-tabbar">
			<a href="首页.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="iconfont icon-home"></i>
				</div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<a href="商品列表.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="iconfont icon-renwu"></i>
				</div>
				<p class="weui-tabbar__label">已接任务</p>
			</a>
			<a href="分类.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon ">
					<i class="iconfont icon-xinxi2"></i>
				</div>
				<p class="weui-tabbar__label">申诉中心</p>
			</a>
			<a href="分类.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon ">
					<i class="iconfont icon-huodongzhongxin"></i>
				</div>
				<p class="weui-tabbar__label">活动中心</p>
			</a>
			<a href="个人中心.html" class="weui-tabbar__item weui-bar__item--on">
				<div class="weui-tabbar__icon">
					<i class="iconfont icon-wode2"></i>
				</div>
				<p class="weui-tabbar__label">我的</p>
			</a>
		</div>

		<script>
			$("#yh").on("click", function() {
				$("#dialog-content").show();
				$("#yh-dialog").show();
			});
			var dialogContent = document.getElementById('dialog-content');
			var yhDialog = document.getElementById('yh-dialog');
			var yh = document.getElementById('yh');
			$('.yh-radio').on("click", function() {
				var haschecked = $('input[name=yh-radio]:checked').parent().prev().find("p").html();
				if($(this).is(':checked')) {
					setTimeout(function() {
						dialogContent.style.display = "none";
						yhDialog.style.display = "none";
						$("#yh").val(haschecked);
					}, 200)

				}
			})
		</script>

	</body>

</html>